<script setup lang="ts">
import { defineAsyncComponent } from 'vue';
import useStore from '@/store';
import { storeToRefs } from 'pinia';
const { user } = useStore();
const { boxState } = storeToRefs(user);
const { clearUser } = user;
const LoginModel = defineAsyncComponent(() => import('@/components/LoginModel.vue'));
const RegisterModel = defineAsyncComponent(() => import('@/components/RegisterModel.vue'));
const handleIRChange = () => {
  boxState.value = !boxState.value;
  clearUser();
}
</script>

<template>
  <div class="login-box">
    <div class="login-box-header">
      <a href="javascript:;" :class="{ 'LorR-selected': boxState === false }" @click="handleIRChange" id="login-tag">
        登 录
      </a>
      <a href="javascript:;" :class="{ 'LorR-selected': boxState === true }" @click="handleIRChange" id="register-tag">
        注 册
      </a>
    </div>
    <login-model v-if="boxState === false" />
    <register-model v-else></register-model>
  </div>
</template>

<style lang="scss" scoped>
@import "@/assets/global";

input {
  border: solide 0px transparent;
}

.login-box {
  background-color: #fff;
  width: 325px;
  height: 325px;
  border-radius: 6%;
  box-shadow: 0 0 10px 0 hsl(0deg 0% 86% / 57%);
  position: relative;
  padding: 30px 25px 5px 25px;
  margin: 0 auto;

  .login-box-header {
    text-align: center;
    float: left;
    width: 100%;


    a {
      @include goodA;
      font-size: x-large;
    }

    .LorR-selected {
      color: $theme;
      font-weight: bold;
      border-bottom: $theme solid 3px;
    }

    #login-tag {
      margin-right: 45px;
    }

    #register-tag {
      margin-left: 45px;
    }
  }
}
</style>
